<!-- 学习计划表单组件，使用Vue3的<script setup>语法糖 -->
<script setup>
// 导入ref函数，用于创建响应式数据
import {ref} from 'vue';

// 定义学习计划列表的响应式数据，初始包含一条示例数据
const list = ref([
    {
        id: 1,               // 唯一标识
        subject: 'Vue.js前端开发实战',  // 学习科目
        content: '学习指令，例如v-if、v-for、v-model等',  // 学习内容
        place: '办公室',      // 学习地点
        status: false,       // 完成状态（false：未完成，true：已完成）
    },
]);

/**
 * 删除学习计划的方法
 * @param {number} id - 要删除的计划ID
 * @param {boolean} status - 该计划的完成状态
 */
let remove = (id, status) => {
    // 只有当计划已完成（status为true）时才允许删除
    if (status) {
        // 使用filter方法过滤掉要删除的项，生成新数组（Vue响应式更新）
        list.value = list.value.filter(item => item.id !== id);
    } else {
        // 未完成时提示不能删除
        alert("请完成该学习计划后再进行删除操作！！！")
    }
}

// 绑定表单输入的响应式变量
let subject = ref('')        // 学习科目输入框
let content = ref('')        // 学习内容输入框
let nextId = ref('')         // 下一个计划的ID（用于生成新计划）
let selectedOption = ref('自习室')  // 选中的学习地点（默认自习室）

// 学习地点选项列表
let options = ref([
    {placeCode: 0, place: '自习室'},
    {placeCode: 1, place: '图书馆'},
    {placeCode: 2, place: '宿舍'},
])

/**
 * 添加新学习计划的方法
 * 点击添加按钮或表单提交时触发
 */
let add = () => {
    // 验证学习科目是否为空
    if (subject.value === '') {
        alert('学习科目为必填项！')
        return  // 阻止继续执行
    }

    // 计算新计划的ID（取现有最大ID+1）
    // 处理空列表情况：当list为空时，Math.max会返回-Infinity，+1后为- Infinity，需要特殊处理
    nextId.value = list.value.length > 0
        ? Math.max(...list.value.map(v => v.id)) + 1
        : 1;

    // 创建新计划对象
    const obj = {
        id: nextId.value,
        subject: subject.value,       // 从输入框获取科目
        content: content.value,       // 从输入框获取内容
        place: selectedOption.value,  // 从下拉框获取地点
        status: false,                // 初始状态为未完成
    }

    // 将新计划添加到列表中
    list.value.push(obj)

    // 清空表单（重置输入状态）
    subject.value = ''
    content.value = ''
    selectedOption.value = '自习室'  // 重置地点为默认值
}
</script>

<template>
    <!-- 卡片容器：包含表单部分 -->
    <div class="card">
        <!-- 卡片标题 -->
        <div class="card-header">
            学习计划表
        </div>

        <!-- 卡片内容：添加计划的表单 -->
        <div class="card-body">
            <!-- 表单提交时触发add方法，@submit.prevent阻止默认提交行为 -->
            <form @submit.prevent="add">
                <!-- 栅格布局：row表示一行，g-4表示列间距 -->
                <div class="row g-4">
                    <!-- 学习科目输入区域 -->
                    <div class="col-auto">
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon1">学习科目</span>
                            <!-- v-model.trim：双向绑定并自动去除首尾空格 -->
                            <input type="text" class="form-control" placeholder="请输入学习科目"
                                   v-model.trim="subject"/>
                        </div>
                    </div>

                    <!-- 学习内容输入区域 -->
                    <div class="col-auto">
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon1">学习内容</span>
                            <!-- 文本域：设置固定高度32px，与输入框高度一致 -->
                            <textarea class="form-control" placeholder="请输入学习内容" v-model.trim="content"
                                      :style="{height:'32px'}"></textarea>
                        </div>
                    </div>

                    <!-- 学习地点选择区域 -->
                    <div class="col-auto">
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon1">学习地点</span>
                            <!-- 下拉选择框：v-model绑定选中的地点 -->
                            <select class="form-select form-select-sm" v-model="selectedOption">
                                <!-- 遍历地点选项，:value绑定选中值，:key设置唯一标识 -->
                                <option v-for="option in options" :value="option.place" :key="option.placeCode">
                                    {{ option.place }}
                                </option>
                            </select>
                        </div>
                    </div>

                    <!-- 添加按钮 -->
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary">添加</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 学习计划列表表格 -->
    <!-- table-striped：条纹状表格；table-hover：悬停效果；table-bordered：带边框 -->
    <table class="table table-striped table-hover table-bordered">
        <!-- 表头 -->
        <thead>
        <tr>
            <th scope="col">序号</th>
            <th scope="col">学习科目</th>
            <th scope="col">学习内容</th>
            <th scope="col">学习地点</th>
            <th scope="col">完成状态</th>
            <th scope="col">操作</th>
        </tr>
        </thead>

        <!-- 表格内容：遍历学习计划列表 -->
        <tbody>
        <!-- v-for遍历list，:key绑定唯一标识item.id -->
        <tr v-for="item in list" :key="item.id">
            <td>{{ item.id }}</td>                  <!-- 序号（ID） -->
            <td>{{ item.subject }}</td>             <!-- 学习科目 -->
            <td>{{ item.content }}</td>             <!-- 学习内容 -->
            <td>{{ item.place }}</td>               <!-- 学习地点 -->

            <!-- 完成状态：开关按钮 -->
            <td>
                <div class="form-check form-switch">
                    <!--
                        复选框：
                        - v-model绑定item.status（双向绑定完成状态）
                        - :id动态生成唯一ID（用于和label关联）
                    -->
                    <input class="form-check-input" type="checkbox" v-model="item.status" role="switch"
                           :id="'cb' + item.id"/>

                    <!-- 标签与复选框关联（点击标签切换状态） -->
                    <label class="form-check-label" :for="'cb' + item.id" v-if="item.status">已完成</label>
                    <label class="form-check-label" :for="'cb' + item.id" v-else>未完成</label>
                </div>
            </td>

            <!-- 操作：删除按钮 -->
            <td>
                <!-- 点击触发remove方法，传递当前项的ID和状态 -->
                <a href="javascript:;" @click="remove(item.id, item.status)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</template>

<!-- 组件样式：scoped表示样式仅作用于当前组件 -->
<style scoped>

</style>